<template>
  <div class="p-20px">
    <el-card>
      <el-form inline :model="query">
        <el-row type="flex" :gutter="20">
          <el-col :span="6">
            <el-form-item class="w-1/1" label="标签名">
              <el-input v-model="query.tags" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="w-1/1" label="城市">
              <el-select class="w-1/1" v-model="query.province" placeholder="请选择">
                <el-option v-for="item in cities" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="w-1/1" label="地区">
              <el-select class="w-1/1" v-model="query.city" placeholder="请选择">
                <el-option v-for="item in areas" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item class="w-1/1" label="企业简称">
              <el-input v-model="query.shortName" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item class="w-1/1" label="状态">
              <el-select class="w-1/1" v-model="query.state" placeholder="请选择">
                <el-option label="启用" :value="1" />
                <el-option label="禁用" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="w-1/1">
              <el-button class="mr-10px" type="default" @click="onClear">
                {{ $t('manage.company.query.clear') }}
              </el-button>
              <el-button type="primary" @click="onSearch">
                {{ $t('manage.company.query.search') }}
              </el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-row type="flex" justify="end">
              <el-button type="success" size="default" :icon="Edit" @click="isShowDialog = true">
                {{ $t('manage.company.add') }}
              </el-button>
            </el-row>
          </el-col>
        </el-row>
      </el-form>

      <el-alert :title="`共 ${total} 条记录`" type="info" show-icon :closable="false" />

      <el-table v-loading="isLoading" :data="list" style="width: 100%;" class="mt-10px mb-15px">
        <el-table-column prop="id" label="ID" width="50" />
        <el-table-column prop="number" label="企业编号" />
        <el-table-column prop="shortName" label="企业简称" />
        <el-table-column prop="tags" label="标签" />
        <el-table-column prop="creatorID" label="创建者" />
        <el-table-column prop="addDate" label="创建日期" />
        <el-table-column prop="remarks" label="备注" />
        <el-table-column prop="state" label="状态" />
        <el-table-column label="操作" width="180">
          <template #default="{row}">
            <el-button type="primary" :icon="Edit" circle @click="openEdit(row.id)" />
            <el-tooltip effect="dark" content="禁用" placement="top">
              <el-button type="warning" :icon="CloseBold" circle @click="toggleEnable(row.id, row.state)" />
            </el-tooltip>
            <el-button type="danger" :icon="Delete" circle @click="delCompany(row.id)" />
          </template>
        </el-table-column>
      </el-table>

      <el-row type="flex" justify="end">
        <el-pagination
          background
          layout="prev, pager, next, sizes, jumper"
          :total="total"
          v-model:current-page="query.page"
          v-model:page-size="query.pagesize"
          :page-sizes="[10, 20, 30, 40]"
        />
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue'
import { Edit, Delete, CloseBold } from '@element-plus/icons-vue'
import { getList, deleteCompany, toggleCompanyEnable } from '@/api/company'
import { ICompanyQuery, ICompanyItem } from '@/api/company/types'
import { cities, getAreas } from '@/utils/cities'

const isLoading = ref(false)
const areas = ref<string[]>([])
const total = ref(0)
const list = ref<ICompanyItem[]>([])
const query = reactive<ICompanyQuery>({
  page: 1,
  pagesize: 10
})

watch(
  () => query.province,
  val => {
    areas.value = getAreas(val as string)
    query.city = areas.value[0]
  }
)

function onSearch() {
  isLoading.value = true
  getList(query)
    .then(data => {
      total.value = data.data.counts
      list.value = data.data.items as ICompanyItem[] // fuck rd
      isLoading.value = false
    })
    .catch(e => {
      ElMessage.error(e.message || '获取用户列表失败')
      isLoading.value = false
    })
}

function onClear() {
  query.tags = ''
  query.province = ''
  query.city = ''
  query.shortName = ''
  delete query.state
  onSearch()
}

onSearch()

watch([() => query.page, () => query.pagesize], onSearch)

async function delCompany(id: number) {
  const ret = await ElMessageBox.confirm('此操作将永久删除企业, 是否继续?', '提示').catch(err => err)
  if (ret === 'cancel') return
  await deleteCompany(id)
  ElMessage({ message: '删除成功', type: 'success' })
  onSearch()
}

// 接口有bug，切换实际无效
async function toggleEnable(id: number, state: number) {
  await toggleCompanyEnable({ id, state })
  ElMessage({ message: '切换成功', type: 'success' })
  onSearch()
}

const isShowDialog = ref(false)
const companyId = ref<number>()

async function openEdit(id: number) {
  companyId.value = id
  isShowDialog.value = true
}
</script>
